<!DOCTYPE html>
<html>
   <head>
   <link rel="icon" type="image/png" href="../../artwork/favicon.png">
      <title>SearchResults</title>
      <link href="css/style.css" rel="stylesheet"/>
      <link href="css/bootstrap.min.css" rel="stylesheet"/>
      <link rel="stylesheet" href="css/introjs.min.css"/>
      <script src="../../js/angular.min.js"></script>
      <script src="../../js/jquery.min.js"></script>
      <script src="js/intro.min.js"></script>
   </head>
   <body>
   <a href="index.html">
   <img style="height: 50px; width: 50px" src="img/home.png"/>
   </a>
      <center>
         <h1>Search for the top five tweeters</h1>
         <br>
         <div ng-app="TweetSearch" ng-controller="Controller">
            <div class="form-group">
               <div class="input-group" id="searchBar">
                  <input type="text" id="query" class="form-control" ng-model="query" placeholder="Search tweet from Loklak">
                  <span class="input-group-btn">
                  <button href='#' class="btn btn-default" type="button" id="button" ng-click="Search()">Search</button>
                  </span>
               </div>
            </div>
            <div ng-if="spinner && !leaderboard"><img src="loading.gif" height="400" width="400"/></div>
            <br>
            <br>
            <br>
            <table>
               <tr ng-if="leaderboard">
                  <th style="text-align: center;">UserName</th>
                  <th style="text-align: center;">Number of Tweets</th>
               </tr>
               <tr ng-repeat="value in leaderboard | limitTo:5" class="results">
                  <td>{{value[0]}}</td>
                  <td>{{value[1]}}</td>
               </tr>
            </table>
         </div>
      </center>
      <script>
        $(function(){
          var introguide = introJs();
          introguide.setOptions({
          steps: [
          {
            element: '.results',
            intro: 'The results here are just from your own peer. This does not include the complete aggregated count',
            position: 'bottom'
          }
          ]
      });
      introguide.start();
    });
      </script>
      <script>
         var app = angular.module('TweetSearch', []);
         app.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

             $scope.Search = function() {
                $scope.spinner=true;
                 var QueryCommand = 'https://api.loklak.org/api/search.json?callback=JSON_CALLBACK&q=' + $scope.query;

                 $http.jsonp(String(QueryCommand)).success(function(response) {

                     var data = response;
                     var statuses = data.statuses;
                     var users = [];
                     for (var i=0; i<statuses.length; i++) {
                         user = statuses[i].screen_name;
                         users.push(user);
                     }
                     var counts = {};
                     for(var i = 0; i< users.length; i++) {
                         var num = users[i];
                         counts[num] = counts[num] ? counts[num]+1 : 1;
                     }
                     var countArr = [];
                     for (obj in counts){
                         countArr.push([obj,counts[obj]])
                     }
                     countArr.sort(function(a,b){return b[1] - a[1]});
                     $scope.leaderboard = countArr;
                     //console.log(counts);
                 });
             }
              $scope.spinner = false;
         }]);
      </script>
   </body>
</html>
